<template>
	<!-- tab切换 -->
<view class="nav-position" :style="{ paddingTop: statusBarHeight + 'px' }">
	<view class="container">
		<scroll-view class="tabs" scroll-x :scroll-left="scrollLeft" enable-passive scroll-with-animation>
		  <view v-for="(item, index) in tabNav" :key="index"
		  class="tab" :data-index="index" @tap="handleTabTap">
			<view class="tab-text" :class="{ active: activeIndex === index }">{{ item.city }}</view>
			<view class="tab-underline" :class="{ activeBor: activeIndex === index }"></view>
		  </view>
		</scroll-view>
	</view>
	<!-- 筛选标签 -->
	<view class="activity-type global-display global-a-items">
		<text v-for="(item,index) in activityType" :key="index"
		@click="activityFun(item,index)"
		:class="index == select ? 'selectstyle' : ''"
		>{{item}}</text>
	</view>
</view>
<view class="nav-height"></view>
<!-- 发布人 -->
<view class="companion-view" v-for="(item,index) in companionData" :key="index" @click="juMp(item._id)">
	<view class="companion-name global-display global-a-items">
		<image :src="item.author_data[0].avatarUrl" class="fadeIn" mode="aspectFill"></image>
		<view>
			<text>{{item.author_data[0].nickname}}</text>
			<text>{{item.timestamp}}</text>
		</view>
	</view>
	<view class="companion-title text-show">{{item.description}}</view>
	<view class="companion-time global-display global-a-items">
		<image src="/static/icon/concern/time.png" mode="widthFix"></image>
		<text>时间：&nbsp;{{item.companion_time}}</text>
	</view>
	<view class="companion-time global-display global-a-items">
		<image src="/static/icon/concern/address.png" mode="widthFix"></image>
		<text>地点：&nbsp;{{item.city}} {{item.full_address}}</text>
	</view>
	<view class="companion-image">
		<image v-for="(item_a,index_a) in item.image" :key="index_a"
		 :src="item_a" @click.stop="showImage(item.image,item_a)" 
		 class="fadeIn" mode="aspectFill">
		</image>
	</view>
	<view class="companion-people">{{item.signups}}人已报名</view>
</view>
<!-- 如果没有数据 -->
<view class="kong-view" v-if="exist">
	<image src="/static/icon/index/kong-zhuang-tai.png" mode="widthFix"></image>
	<text class="no-data">没有更多了</text>
</view>
<view style="height: 200rpx;"></view>
<view class="sign-up other-up" @click="initPartner">发布活动</view>
</template>

<script setup lang="ts">
	import {ref,onMounted, watch,nextTick} from 'vue'
	import {onReachBottom} from '@dcloudio/uni-app'
	import { getCompanionCityAPI,getCompanionHomeAPI } from '@/api/companion'
	import type { getCompanionCityItemResponse,getCompanionHomeItemResponse } from '@/types/companion'
	import { checkLoginAPI } from '@/api/global'
	// 存储结伴城市
	const tabNav = ref<getCompanionCityItemResponse[]>([])
	// 存储结伴数据
	const companionData = ref<getCompanionHomeItemResponse[]>([])
	// 是否有数据
	const exist = ref(false)
	// 筛选类型
	const activityType = ref<string[]>(['全部','本月出发','下月出发','我的活动'])
	
	const scrollLeft = ref(0)
	// 为 tab 尺寸信息添加明确类型
	type TabRect = { width: number; left: number }
	const tabWidths = ref<TabRect[]>([])
	const activeIndex = ref(0)
	// 选择城市切换
	const cityWord = ref('推荐')
	// 状态栏高度（自定义导航适配）
	const statusBarHeight = ref<number>(0)
	// 点击tab切换滑动指定tab上
	async function handleTabTap(e:any) {
		const index = Number(e?.currentTarget?.dataset?.index ?? 0)
		const current = tabWidths.value[index]
		if (!current) return
		scrollLeft.value = current.left - uni.getSystemInfoSync().windowWidth / 2 + current.width / 2
		activeIndex.value = index
		cityWord.value = tabNav.value[index].city
	}
	// 请求数据
	onMounted(async()=>{
		// 读取状态栏高度，避免内容顶到刘海/状态栏下
		const sys = uni.getSystemInfoSync()
		statusBarHeight.value = (sys.statusBarHeight || 0)
		// 获取结伴城市
		const tabRes = await getCompanionCityAPI();
		tabNav.value = tabRes.data
		// 进入页面获取全部结伴数据
		const companionRes = await getCompanionHomeAPI({city:'推荐',keyword:'全部',page:1})
		exist.value = companionRes.data.length > 0 ? false : true
		companionData.value = companionRes.data
		console.log(companionRes);
		await nextTick()//获取tab导航数据
		let query = uni.createSelectorQuery();
		query.selectAll('.tab').boundingClientRect((result: any) => {
			const rects = Array.isArray(result) ? result : [result]
			tabWidths.value = rects.map((item: any) => ({ width: item.width, left: item.left }))
		}).exec()
	})
	//类型筛选
	const select = ref(0)
	// 存储选中值
	const keyWord = ref('全部')
	async function activityFun(val:string,index:number){
		if(index != 3){
			select.value = index
			keyWord.value = val
		}else{
			// 查询是否登录
			await checkLoginAPI();
			wx.navigateTo({url:'/pages/companion/my-activities'})
		}
	}
	
	// 如果选中城市切换或类型，并且都不为空
	watch([keyWord,cityWord],async(newVal,oldVal)=>{
		page.value = 1
		const companionRes = await getCompanionHomeAPI({city:cityWord.value,keyword:keyWord.value,page:1})
		exist.value = companionRes.data.length > 0 ? false : true
		companionData.value = companionRes.data
	})
	// 上啦加载
	const page = ref(1)
	onReachBottom(async()=>{
		page.value++
		const companionRes = await getCompanionHomeAPI({city:cityWord.value,keyword:keyWord.value,page:page.value})
		companionData.value = [...companionData.value,...companionRes.data]
	})
	// 预览图片
	function showImage(image:string[],item_a:string){
		wx.previewImage({
		  current: item_a, // 当前显示图片的http链接
		  urls: image // 需要预览的图片http链接列表
		})
	}
	// 跳转详情
	async function juMp(_id:string){
		// 查询是否登录
		await checkLoginAPI();
		wx.navigateTo({url:'/pages/companion/partner-details?_id=' + _id})
	}
	// 跳转发布活动
	function initPartner(){
		wx.navigateTo({url:'/pages/companion/Init-partner'})
	}
</script>

<style>
.nav-height{
	height: 0rpx;
}

/* 顶部吸附导航区域 */
.nav-position{
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: #ffffff;
	backdrop-filter: saturate(180%) blur(8px);
	box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.04);
}
.container{
	padding: 0 20rpx;
	background-color: #ffffff;
}
.tabs{
	display: flex;
	align-items: center;
	height: 100rpx;
	white-space: nowrap;
}
.tab{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 100rpx;
	padding: 0 24rpx;
}
.tab-text{
	font-size: 28rpx;
	color: #333333;
	font-weight: 500;
	transition: color .25s ease;
}
.tab-text.active{
	color: #111111;
	font-weight: 600;
}
.tab-underline{
	position: absolute;
	left: 22rpx;
	right: 22rpx;
	bottom: 8rpx;
	height: 6rpx;
	background: linear-gradient(90deg,#ffd166,#fca311);
	border-radius: 6rpx;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .25s ease;
}
.tab-underline.activeBor{
	transform: scaleX(1);
}

/* 筛选标签 */
.activity-type {
	padding: 20rpx;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16rpx 20rpx;
	box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.04);
}
.activity-type text{
	margin-right: 20rpx;
	font-size: 26rpx;
	font-weight: bold;
	background-color: #f5f6f6;
	padding: 12rpx 24rpx;
	border-radius: 999rpx;
	color: #333333;
	transition: all .2s ease;
}
.activity-type text:last-child{
	margin-left: auto;
	margin-right: 0;
}
.activity-type text:active{
	transform: scale(0.98);
}
.selectstyle{
	background-color: #fceeae !important;
	box-shadow: 0 6rpx 12rpx rgba(252, 238, 174, 0.6);
}

/* 卡片列表 */
.companion-view{
	margin: 20rpx;
	padding: 24rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	box-shadow: 0 10rpx 24rpx rgba(0,0,0,0.06);
	transition: transform .2s ease, box-shadow .2s ease;
}
.companion-view:active{
	transform: translateY(2rpx);
	box-shadow: 0 8rpx 18rpx rgba(0,0,0,0.06);
}

.companion-name{
	display: flex;
	align-items: center;
	gap: 18rpx;
	margin-bottom: 18rpx;
}
.companion-name image{
	width: 72rpx;
	height: 72rpx;
	border-radius: 50%;
	background-color: #f2f2f2;
}
.companion-name view{
	display: flex;
	flex-direction: column;
	gap: 6rpx;
}
.companion-name view text:first-child{
	font-size: 28rpx;
	color: #111111;
	font-weight: 600;
}
.companion-name view text:last-child{
	font-size: 24rpx;
	color: #8a8a8a;
}

.companion-title{
	font-size: 30rpx;
	font-weight: 600;
	color: #222222;
	margin-bottom: 14rpx;
	line-height: 1.5;
}
/* 多行省略 */
.text-show{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.companion-time{
	display: flex;
	align-items: center;
	gap: 10rpx;
	font-size: 26rpx;
	color: #555555;
	margin: 6rpx 0;
}
.companion-time image{
	width: 28rpx;
	height: 28rpx;
}

.companion-image{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8rpx;
	margin-top: 14rpx;
}
.companion-image image{
	width: 100%;
	height: 200rpx;
	border-radius: 12rpx;
	background-color: #f5f5f5;
}

.companion-people{
	margin-top: 16rpx;
	font-size: 24rpx;
	color: #a86d00;
	background: #fff7e6;
	display: inline-flex;
	align-items: center;
	padding: 8rpx 16rpx;
	border-radius: 999rpx;
}

/* 空状态 */
.kong-view{
	padding: 80rpx 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #8a8a8a;
}
.kong-view image{
	width: 300rpx;
	opacity: 0.9;
}
.no-data{
	margin-top: 20rpx;
	font-size: 26rpx;
}

/* 发布活动按钮 */
.sign-up.other-up{
	position: fixed;
	bottom: 40rpx;
	right: 40rpx;
	z-index: 1001;
	background: linear-gradient(135deg,#ffd166,#fca311);
	color: #ffffff;
	font-size: 28rpx;
	font-weight: 600;
	padding: 22rpx 40rpx;
	border-radius: 999rpx;
	box-shadow: 0 12rpx 28rpx rgba(252,163,17,0.45);
	bottom: calc(env(safe-area-inset-bottom) + 40rpx);
}

/* 动画 */
.fadeIn{
	animation: fadeIn .35s ease both;
}
@keyframes fadeIn{
	0%{opacity:0;transform:translateY(8rpx)}
	100%{opacity:1;transform:translateY(0)}
}
</style>